<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>保险超级课堂-资讯类管理</title>
    <script src="../../js/commonJs.js"></script>
    <script src="../../js/commonCss.js"></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .el-icon-error {
            color: red;
            cursor: pointer;
        }

        .ql-editor {
            height: 300px;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <header>
        <span class="title">{{titleText}}</span>
        <el-button size="small" v-if="isList" @click="addNews">添加</el-button>
        <el-button size="small" v-else @click="returnBack">返回</el-button>
    </header>
    <div class="table-wraper" v-if="isList">
        <div class="search-wraper">
            <!--<div class="search-header">-->
                <!--<span class="title">筛选查询</span>-->
                <!--<el-button size="small" @click="search">查询结果</el-button>-->
            <!--</div>-->
            <div class="search-form">
                <el-form inline label-width="100px" size="small">
                    <el-form-item>
                        <el-input v-model="q.searchWord" type="text" placeholder="标题" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="类别">
                        <el-select v-model="q.typeId" clearable placeholder="类别" @change="changeType">
                            <el-option v-for="type in typeList"
                                       :key="type.ictId"
                                       :label="type.ictTitle"
                                       :value="type.ictId.toString()">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <el-table :data="entityList" stripe border style="width: 100%" @selection-change="changeFun">
            <el-table-column type="selection" width="50">
            </el-table-column>
            <el-table-column prop="cnId" label="序号"></el-table-column>
            <el-table-column prop="cnTitle" label="标题"></el-table-column>
            <el-table-column prop="cnCover" label="展示图片">
                <template slot-scope="scope">
                    <img style="width: 100%;height:50px;" :src="getPic(scope.row.cnCover)"></img>
                </template>
            </el-table-column>
            <el-table-column prop="typeName" label="类别"></el-table-column>
            <el-table-column prop="cnTime" label="创建时间"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button @click="updateNews(scope.row)" type="text" size="medium">编辑</el-button>
                    <el-button @click="deleteNews(scope.row)" type="text" size="medium" class="color-F56C6C">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-button type="danger" size="mini" icon="el-icon-delete" style="margin-top: 10px"
                   @click="dels">批量删除
        </el-button>
        <div class="table-footer" style="text-align: center;">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
    <div class="edit-wraper" v-else>
        <div style="width: 40%; margin: 50px auto;">
            <el-form ref="addForm" :model="addForm" label-width="80px">
                <el-form-item label="标题">
                    <el-col :span="12">
                        <el-input v-model="addForm.cnTitle"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="类别" style="width: 40%;">
                    <el-select v-model="addForm.cnType" clearable placeholder="类别">
                        <el-option v-for="type in typeList"
                                   :key="type.ictId"
                                   :label="type.ictTitle"
                                   :value="type.ictId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="图片" prop="cnCover">
                    <el-upload
                            class="avatar-uploader"
                            action="doUpload"
                            :before-upload="beforeUpload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess">
                        <img v-if="dialogImageUrl" :src="dialogImageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>
                <el-form-item label="内容" style="width: 100%;">
                    <template>
                        <div class="components-container">
                            <div class="info"></div>
                            <div class="editor-container">
                                <q-edit v-on:get-value="getValues"></q-edit>
                            </div>
                        </div>
                    </template>
                </el-form-item>
                <el-form-item label="">
                    <el-button @click="returnBack">返回</el-button>
                    <el-button type="primary" @click="submit()">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: function () {
            return {
                //列表url
                listUrl: 'irClassNews/getNewsList',
                //删除url
                delUrl: 'irClassNews/doDeleteNews',
                folder: 'irClassNews',
                q: {
                    searchWord: '',
                    typeId:""
                },
                isEdit: false,
                isAdd: false,
                isList: true,
                addForm: {},
                entityList: [],
                typeList: [],
                currentPage: 1,
                pageSize: 10,
                total: 1000,
                changeArr: [],
                fieldname: 'cnContent',
                dialogImageUrl: '',
                dialogVisible: false,
            }
        },
        methods: {
            changeType(val){
              if(val){
                  this.$set(this.q, this.q.type, val.value)
              }
                this.getEntityList()
            },
            reload2() {
                vm.isList = true
                vm.addForm = {}
            },
            dels: function () {
                var ids = [];
                $.each(vm.changeArr, function (k, v) {
                    ids.push(v.cnId);
                })
                if (ids.length == 0) {
                    vm.vAlert('请选择您要删除的数据', '错误')
                    return false;
                }
                vm.del(ids)
            },
            search() {
                vm.currentPage = 1
                vm.getEntityList()
            },
            /*编辑start*/
            updateNews(row) {
                this.isEdit = true;
                this.isAdd = false;
                this.isList = false
                this.addForm = row
                this.dialogImageUrl = imageURL + row.cnCover;
                //给富文本添加内容
                this.$nextTick(()=>{
                    $('.ql-editor').html('')
                    $('.ql-editor').append(row.cnContent);
                })
            },
            addNews() {
                this.isList = false
                this.isAdd = true
                this.isEdit = false
                this.addForm = {}
                this.dialogImageUrl = ""
            },
            deleteNews(row) {
                var ids = [];
                ids.push(row.cnId);
                vm.del(ids);
            },
            /*删除end*/
            returnBack: function () {
                this.isEdit = false;
                this.isAdd = false;
                this.isList = true;
                this.addForm = {};
                this.getEntityList();
            },
            submit() {
                var url = "";
                if (vm.addForm.cnId == null) {
                    url = baseURL + "irClassNews/doAddNews"
                } else {
                    url = baseURL + "irClassNews/doUpdateNews"
                }
                if (vm.addForm.cnTitle == null || vm.addForm.cnTitle == '') {
                    vm.vAlert('请输入标题', '错误')
                    return false;
                }
                if (vm.addForm.cnType == null || vm.addForm.cnType == '') {
                    vm.vAlert('请选择类型', '错误')
                    return false;
                }
                if (vm.addForm.cnCover == null || vm.addForm.cnCover == '') {
                    vm.vAlert('请上传图片', '错误')
                    return false;
                }
                if (vm.addForm.cnContent == null || vm.addForm.cnContent == '') {
                    vm.vAlert('请输入内容', '错误')
                    return false;
                }
                axios.post(url + "?token=" + token, this.addForm)
                    .then(function (res) {
                        if (res.data.msg == 'token失效，请重新登录') {
                            alert('token失效，2秒后跳转到登录页面！');
                            var timeout = setTimeout(function () {
                                window.parent.location.href = baseURL + "login.html";
                                clearTimeout(timeout);
                            }, 2000)
                        }
                        if (res.data.code === 0) {
                            vm.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                            setTimeout(function () {
                                vm.reload()
                            }, 500)
                        } else {
                            vm.$message({
                                message: res.data.msg,
                                type: 'error'
                            });
                        }
                    })
                    .catch(function (error) {
                    });
            },
            setPic(path) {
                vm.dialogImageUrl = imageURL + path
                vm.addForm.cnCover = path
            },
            handleAvatarSuccess(res, file) {
            },
            //获取一级分类
            getTypeList() {
                this.typeList = []
                $.get(baseURL + "irClassType/getTypeList", function (r) {
                    if (r.msg == 'token失效，请重新登录') {
                        alert('token失效，2秒后跳转到登录页面！');
                        var timeout = setTimeout(function () {
                            window.parent.location.href = baseURL + "login.html";
                            clearTimeout(timeout);
                        }, 2000)
                    }else if (r.typeList != null) {
                        vm.typeList = r.typeList
                    }
                });
            },
        },
        computed: {
            titleText: function () {
                if (this.isEdit) {
                    return '编辑'
                } else if (this.isAdd) {
                    return '添加'
                } else if (this.isList) {
                    return '资讯类管理'
                }
            }
        },
        created() {
            this.getTypeList();
            this.getEntityList();
        }
    })
</script>
</html>
